import QtQuick 2.15
import QtCharts 2.13

import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0

Item {
    width: 512
    height: 300
    property int circularGaugeValue: 0
    property int addValue: 1
    property int ctrlmode: 0
    property string ct: "当前温度 : "

    function startTimer(){
        if(circularGaugeValueTimer.running === true)
            circularGaugeValueTimer.running = false
        else
            circularGaugeValueTimer.running = true
    }

    Connections {
        target: ptr_hw
        function onSig_ctrlmode (mode) {
            console.log("改变控制模式:", mode)
            ctrlmode = mode
        }
    }

    Timer{
        id:circularGaugeValueTimer
        repeat: true
        running: false
        interval: 50
        onTriggered: {
            if(circularGaugeValue > 140 && addValue === 1){
                addValue = -30
            }
            else if(circularGaugeValue < -40 && addValue === -30){
                addValue = 1
                circularGaugeValue = -41
            }
            circularGaugeValue += addValue
            ttt1.text = ct + circularGaugeValue.toString()

            if(ctrlmode < 1){
                ptr_hw.invokable_setSpeed(circularGaugeValue)
            }

        }
    }

    /*
    CircularGauge有以下属性：

    maximumValue :  表盘上显示的最小值
    minimumValue : 表盘上显示的小大值
    stepSize : 表盘上显示的值的步长
    style : 可供自定义的风格
    tickmarksVisible : 是否可见
    value : 当前表盘的指针指向的值

    CircularGaugeStyle 有以下属性：

    angleRange : 表盘指针可旋转活动的角度范围
    background : 表盘背景，可自定义，弄个什么样都可以
    control : 代表表盘自身
    foreground : 表盘前景，可以说是以下图中标明的那样，是中心那个圆点，但是这个是可以自定义的，大小和样式都随意，可以盖过整个表盘，也可以拿个图片替换中心那个圆斑
    labelCount : 表盘上显示的文本的数量
    labelInset : 表盘上的文本到中心的距离
    labelStepSize : 表盘上文本之间的步长
    maximumValueAngle : 最大角度值，是偏离12点方向向右的最大角度值，是正值。请参考图。
    minimumValueAngle : 最小角度值，是偏离12点方向向左的最大角度值，是负值。请参考图。
    minorTickmark : 代表表盘上小的那一排刻度
    minorTickmarkCount : 小刻度的数量
    minorTickmarkInset : 小刻度到中心点的距离
    needle : 表盘的指针
    needleRotation : 指针的偏移角度
    outerRadius : 表盘的半径大小
    tickmark : 表盘上比较大的那些刻度，这个也是可以自定义样式的
    tickmarkCount : 大刻度的数量
    tickmarkInset : 大刻度到中心点的距离
    tickmarkLabel : 大刻度对应的显示的值所在的label，这个也可以自定义，随便整
    tickmarkStepSize : 大刻度的步长

    */

    CircularGauge {
        id: circularGauge
        // anchors.fill: parent
        // anchors.centerIn: parent
        x:0
        y:0
        width: 300
        height: 300
        minimumValue: -40
        maximumValue: 140
        value: circularGaugeValue
        stepSize: 0.1
        tickmarksVisible: true

        style: CircularGaugeStyle {
            id: style
            tickmark: Rectangle {
                visible: true //styleData.value < 110 || styleData.value % 10 == 0
                implicitWidth: outerRadius * 0.02
                antialiasing: true
                implicitHeight: outerRadius * 0.06
                color: styleData.value >= 110 ? "#FF5555" : "#ccffdd"
            }

            minorTickmark: Rectangle {
                visible: styleData.value < 141
                implicitWidth: outerRadius * 0.01
                antialiasing: true
                implicitHeight: outerRadius * 0.03
                color: styleData.value >= 110 ? "#FF5555" : "#ccffdd"
            }
            tickmarkLabel:  Text {
                font.pixelSize: 18 // Math.max(11, outerRadius * 0.1)
                text: styleData.value
                color: styleData.value >= 110 ? "#FF5555" : "#ccffdd"
                antialiasing: true
            }

            needle: Rectangle {
                y: outerRadius * 0.15
                implicitWidth: outerRadius * 0.03
                implicitHeight: outerRadius * 0.9
                antialiasing: true
                color: "#e5e5e5"
            }

            background: Item {
                Rectangle {
                    width: 300
                    height: width
                    radius: width / 2
                    color: "#122121"
                    anchors.centerIn: parent
                }
            }

            foreground: Item {
                Rectangle {
                    width: outerRadius * 0.2
                    height: width
                    radius: width / 2
                    color: "#e54151"
                    anchors.centerIn: parent
                }
            }
        }
    }


    Rectangle{
        x:310
        y:10
        width: 180
        height: 290
        border.width: 1
        border.color: "#FFFF11"
        color: "#117722"
        opacity: 0.5
        radius: 30
    }

    Text {
        id: ttt0
        x:320
        y:25
        width: 160
        height: 30
        font.pixelSize: 24
        color: "#eeffff"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        text: qsTr("温度")
    }

    Text {
        id: ttt1
        x:320
        y:70
        width: 180
        height: 30
        font.pixelSize: 20
        color: "#eeffff"
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        text: qsTr("当前温度: 0")
    }

    Text {
        id: ttt2
        x:320
        y:120
        width: 180
        height: 30
        font.pixelSize: 20
        color: "#eeffff"
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        text: qsTr("最高温度: 140")
    }

    Text {
        id: ttt3
        x:320
        y:170
        width: 180
        height: 30
        font.pixelSize: 20
        color: "#eeffff"
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        text: qsTr("最低温度: -40")
    }

    Text {
        id: ttt4
        x:320
        y:220
        width: 180
        height: 30
        font.pixelSize: 20
        color: "#eeffff"
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
        text: qsTr("平均温度: 54")
    }


}
